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<TR><TD ALIGN=RIGHT WIDTH="335" HEIGHT="25"> 

<TABLE cellspacing="0" cellpadding="0" height="24" border="0" width="339"> 

<TR><TD rowspan="2" width="280" align="right"> 

202 

<B><A HREF="javascript:void(0)" onClick="dispC@j')" 
onmouseover="window.status=msov; prvshow(ppic[@j].src); return true;" 
onmouseout="window.status=msout; prvshow(ppic[@j].src); return true;"> 
ltem@j Description and $ Price</A></B> 

</TD><TD rowspan="2" width="27"> 
203 

<INPUT type="text" name="E_quan@j" size="3" onchange="update(@j)" > 
</TD><TDwidth="16"> 

204 

<A HREF="javascript:Add(1,@j7' onMouseOver="document.adju@j.src='upb.gif; return true;" 
onMouseout="document.adju@j.src='upt.gif ; return true;"> 
<IMG SRC="upt.gif" NA!VlE="adju@j" BORDER="0" HEIGHT="11" WIDTH="16"></A> 
</TD></TR><TR><TD width="16"> 

<A HREF="javascript:Add(-1,@j)" onMouseOver="document.adjd@j.src='dnb.gif ; return true;" 

onMouseout="document.adjd@j.src='dnt.gif ; return true;"> 

<1MG SRC="dnt.gif NAME="adjd1" BORDER="0" HEIGHT="11" WIDTH="16"></A> 

</TD></TR></TABLE></TD><TD ALIGN=LEFT WIDTH="63" HEIGHT="25"> 
205 

<INPUT type="text" value=" 0.00" name="C_cost@j" size="9" maxlength="8" 
onfocus="document.fomn1.G_cost@j".blur()"> 

</TD><TR><TD ALIGN=RiGHT WIDTH="335" HEIGHT="25"> 

<TABLE cellspacing="0" cellpadding="0" height="24" border="0" width="339"> 

<TR> 



FIG. 2B 
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+ 



<TD><TABLE border="0" cellpadding="0" cellspacing="0"><TR> 
223 

<A href="javascript:disp1{@j)" 

onmouseover="window.status=msov; document.details@j.src='rollOver.gif ; return true;" 
onmouseout="window.status=msout; document.details@j.src='Description,gif ; return true;"> 
<IMG src='details.gif width="80" height="15" border=0 aIt="Click for Product Description" 
name="details@j" ></A> 228 

<BR> 
225 

<A href="javascript:Add(1,@j)" 

onmouseover= "window.status=msovp; return true;" 

onmouseout="window.status=msout; return true;"> 

<IMG src='SH1/prevs@j,jpg' width="80" heigiit="80" border="0" 

alt=" ltem@j Description and $ Price"></A> 229 

</TD></TR><TR><TD><CENTER> 

<TABLE border="0" cellpadding="0" cellspacing="0" width="60%"> 
<TR><TD rowspan="2"> 

226 

<INPUT type="text" name="E_quan@j" size="3" onchange="update{@j)"> 
<INPUT type="hidden" value=" 0.00" name="C_cost@j"> 

</TD><TD> 
227 

<A HREF="javascript:Add(1,@j)" 

onMouseOver="document.adju@j.src='upb.gif ; return true;" 

onl\/iouseout="document.adju@j.src='upt.gif'; return true;"> 

<IMG SRC="upt.gif' NAME="adju@j" BORDER="0" HEIGHT="11" WIDTH="16"></A> 

</TD></TR><TR><TD> 

<A HREF="javascript:Add(-1,@j)" 

onlVlouseOver="document,adjd@j,src='dnb.gif ; return true;" 

onMouseout="document.adjd@j.src='dnt.gif'; return true;"> 

<iMG SRC="dnt.gif NAiVlE="adjd@j" BORDER="0" HEIGHT="11" WIDTH="16"></A> 

</TD></TR></TABLE></CENTER></TD></TR></TABLE></TD> 
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FIG. 2D 
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+ 



HTML 4+ Web Browser 



Back Forward Reload Stop 



Invoice 



Subtotal $ 



110.00 



Total $ 



133.10 



Mouse 
Over 
Preview 
Window 



DEMONSTRATION STORE • Watch the Status Bar for Instructions! 
Click Pictures to ADD to Order! To Preview Mouse Over Item Links! 
LIST FORMAT: CAT1 CAT2CAT3 CAT4 INVOICE SEARCH HELP 
PICTURE FORMAT: CAT1 CAT2 CAT3 CAT4 SUMMARY HOME 



COMPANY NAME 

401 

The Best Company Slogan 
COMPANY STREET ADDRESS 
CITY, STATE/PROVINCE, ZIP CODE 
WWW.COMPANY.COM 



INVOICE 

Tue May 22 2 1 :20:53 MDT 200 1 402 



PHONE: FAX: 
EMAIL: 



403 



Quantity 


Description 405 


Unit Price 


Amount $ 


1 




404 Item 1-1 Descriptive Name 


$ 10.00 




10.00 


3 




Item 1-2 Descriptive Name 


$ 10.00 






4 




Item 2-6 Descriptive Name 


$ 10.00 




40.00 


1 




Item 3-1 1 Descriptive Name 


$ 10.00 




10.00 


2 




Item 4-9 Descriptive Name 


$ 10.00 




20.00 




411 REMOVE ZERO ENTRIES! 


Subtotal 




110.00 






Shipping 




11.00 




412 VIEW PICTURE SUMMARY 


Tax 




12.10 






Total 




133.10 



406 



407 
408 
409 
410 



TO: * REQUIRED 413 



SHIP TO: 414 



ENTER YOUR NAME* 


ENTER YOUR NAME 


STREET ADDRESS* 


STREET ADDRESS 


CITY, STATE/PROVINCE* 


CITY. STATE/PROVINCE 


COUNTRY.ZIP CODE* 


COUNTRY.ZIP CODE 


PHONE*/FAX 


PHONE/FAX 


EMAIL@ISP* 


EMAIL@ISP 



415 1 SAVE Shipping Data j j RECALL |1 DELETE j 

FAX, PRINT/MAIL, OR SUBMIT ON-LINE BELOW. 
FOR ONLINE CREDIT CARD PURCHASES USE THE SECURE CHECKOUT. 



416 Select Payment Type |T| CARD# | For Print or Fax Only | EXPIRYl / 



CARDHOLDER/ 
SIGNATURE: 



SECURE CHECKOUT 



417 



Left Click on Frame to Update $ Amount 



FIG. 4A 
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<TR><TD align="center"><TABLE border="0" cellpadding="0" 
cellspacing="0"><TR><TD rowspan="2" height="25"> 



<INPUT type="text" name="D_quan@P" size="3" onchange="update(@P)" 
value="1"></TD><TD> 

<A href="javascript:Add(1 ,@P)" onmouseoveF"document.adju@P.src='upb.gif ; 
return true;" onmouseout="document.adju@P.src='upt.gif ; return true;"><IMG 
src="upt.gif' name="adju@P" border="0" height="ir 
width="16"></A></TD></TR><TR><TD> 

<A href="javascript:Add(-1 ,@P)" onmouseover="document.adjd@P,src='dnb.gif ; 
return true;" onmouseout="document.adjd@P.src='dnt.gif ; return true;"><IMG 
src="dnt.gif' name="adjd@P" border="0" height="11 "width- '16"></A></TD> 
</TR></TABLE></TD><TD><CENTER> 



<A HREF="javascript:void(0)" onClick="dispckCSH1/info@P.html')" 
onmouseover="window.status=msov; prvshow('SH1/prevs@P.jpg'); return true;" 
onmouseout="window.status=msout; prvshow('SH1/prevs@P.jpg'); return true;"> 
<B>ltem@P Descriptive Name</B></A> 

418 <INPUT TYPE="hidden" NAME="C_descr@P" VALUE="ltem@P Descriptive 
Name"> 

405 </CENTER></TD><TD align="right" width="83" height="22"><FONT 
COLOR=#000099><B>$ ltem@P Price</B> </FONT></TD><TD> 

406 <|NPUT type="text" value="0.00" name="E_cost@P" size="9" maxlength="8" 
onfocus="document.form1.E_cost@P.blur()"> 

</TD></TR> 



FIG. 4B 
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<TABLE align="center" border="0" width="95%" cellspacing="0" cellpadding="0"> 
<TR><TDwidth="15%"><TABLE border="0" cellpadding="0" cellspacing="0"> 
<TR><TD> 

501 <A href="javascript:disp1(@j)" 

onmouseover="window.status=msov; document.details@j.src='details.gif ; return true;" 
onmouseout="window,status=msout; document,details@j.src-details.gif; return true;"> 
<IMG src='details.gif width="80" height="15" border=0 
alt="Click for Product Description" name="details@j" ></A><BR> 

502 <A href="javascrlpt:Add(1,@j)" 
onmouseover= "window.status=msovp; return true;" 
onmouseout="window.status=msout; return true;"> 

<IMG src='SH1/prevs@j.jpg' width="80" height="80" border="0" 
alt="ltem @j Descriptive Name $Price"></A> 

</TD></TR><TR><TD><CENTER> 

<TABLE border="0" cellpadding="0" cellspacing="0" width="60%"> 
<TR><TD rowspan="2"> 

503 <INPUT type="text" name="E_quan@j" size="3" onchange="update(@j)"> 
<INPUT type="hidden" value=" 0.00" name="C_cost@j"></TD><TD> 

<A HREF="javascript:Add(1,@j)" 

onlVlouseOver="document.adju@j.src='upb.gif'; return true;" 

onlVlouseout="document.adju@j.src='upt.gif; return true;"> 

<MG SRC="upt.gif" NAIVIE="adju@j" BORDER="0" HEIGHT="ir' WIDTH ="16"></A> 

</TD></TR><TR><TD> 

<A HREF="javascript:Add(-1 ,@j)" 

onl\/!ouseOver="document.adjd@j.src='dnb.gif ; return true;" 

onMouseout="document.adjd@j,src='dnt.gif ; return true;"> 

<\m SRC="dnt.gif NAIVIE="adjd@j" BORDER="0" HEIGHT="11" WIDTH="16"></A> 

</TD></TR></TABLE></CENTER></TD></TR></TABLE><n'D> 
<TD width="85%" valign="top" align="left"><B> 

504 <FONT COLOR=#0000ff>ltem @j Descriptive Name $ PRICE</B></FONT> 

505 <BR>This area for brief product description of Item @j.</TD> 
</TR><TR> 

<TD w/idth="100%" colspan="2" height="2"> 
<HR width="95%" size="1" color="#COCOCO"> 
</TD></TR></TABLE> 

FIG. SB 
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<TR><TD ALIGN=RIGHT WIDTH="411" HEIGHT="25"> 

<TABLE cellspacing="0" cellpadding="0" height="24" border="0" width="411"> 

<TR><TD rowspan="2" width="360" align="right"> 

<A HREF="javascript:void{0)" onClick="dispC@j')" 
onmouseover="window.status=msov; prvshow(ppic[@j].src); return true;" 
onmouseout="window.status=msout; prvshow{ppic[@j].src); return true;"> 
Item @j Descriptive Name $Price</A> 

<SELECT name="color@j" onchange="update(@j)" 
><OPTION>red<OPTION>blue<OPTiON>green</SELECT> 
<SELECT name="size@j" 

onchange="update(@j)"><OPTION>S<OPTION>M<OPTION>L<OPTiON>XL 
</SELECT> 



</TD><TD rowspan="2" width="27"> 
513 <INPUT type="text" name="E_quan@j" size="3" onchange="update(@j)" > 
</TD><TD width="16"> 

514 

<A HREF="javascript:Add(1,@j)" 

onMouseOver="document.adju@j.src='upb.gif ; return true;" 

oniVlouseout="document.adju@j.src='upt.gif ; return true;"> 

<MG SRC="upt.gif' NAME="adju@j" BORDER="0" HEIGHT="11" WIDTH="16"></A> 

</TD></TR><TR><TD width="16"> 

<A HREF="javascript:Add(-1 

onMouseOver="document.adjd@j.src='dnb.gif ; return true;" 
oniVIouseout="document.adjd@j.src='dnt.gif ; return true;"> 
<IIVIG SRC="dnt.gif NAIVIE="adjd@j" BORDER="0" HEIGHT="ir' WIDTH="16"></A> 
</TD></TR></TABLE></TD><TD ALIGN=LEFT WIDTH="63" HEIGHT="25"> 

515 

<INPUT type="text" value=" 0.00" name="C_cost@j" size="9" maxlengtii="8" 

onfocus="document.form1.C_cost@j".blur()"> 

</TD> 



+ 



FIG. 5D 
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<TR> 

<TD align="RIGHT" wiclth="330"> 

522 <FONT COLOR=#000000><FONT SIZE="-0">ITEM@j Descriptive Name $ 
Price</FONT></FONT> 

</TD><TD wiclth="81"><DIV allgn="right"> 

<TABLE border="0" cellpadding="0" cellspacing="0" width="55"> 

<TR><TD> 

523 <A HREF="javascript:Add(1.@j)" 
onMouseOver="document.adju@j.src='upb.gif ; return true;" 
onMouseout="document.adju@j.src='upt,gif ; return true;"> 

<ilVIG src="upt.gif' name="adju@j" border="0" height="22" wldth="22"></A> 
</TD><TD> 

524<INPUTtype="text" name="E_quan@f size="3" onchange="update(@j)"> 
</TD><TD> 

525 <A HREF="javascript:Add(-1,@j)" 
onMouseOver="document.adjd@j.src- dnb.gif ; return true;" 
onMouseout="document.adjd@j.src='dnt.gif ; return true;"> 

<IIV1G src="dnt.gif name="adjd@j" bordeF"0" height="22"width="22"></A></TD> 
</TR></TABLE></DIV></TD><TD align="LEFT" width="63" lieight="25"> 

526 <INPUT type="text" value=" 0.00" name="C_cost@j" size="9" maxlength="8" 
onfocus="document.form1.C_cost@j"> 

</TD></TR> 



FIG. 5F 
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801 



var ilength =6; //#items+1 
itempr[0]=0.0 # not used! 



itemds[0]= "Category 1" //Category title 
itemds[1] = "Item 1-1 Descriptive Name" 
itemds[2] = "Item 1-2 Descriptive Name " 
itemds[3] = "Item 1-3 Descriptive Name" 
itemds[4] = "Item 1-4 Descriptive Name" 
itemds[5] = "Item 1-5 Descriptive Name" 



itemfl[0]= "blank" 
itemfi[1]="details.gif 
itemfl[2] ="10off.gif 
itemfl[3] ="details.gif 
itemfi[4] ="20off.gif 
itemfi[5] = "new.gif 



itempr[1] = 10.00 
itempr[2] = 10.00 
itempr[3] = 10.00 
itempr[4] = 10.00 
itempr[5] = 10.00 



ppic[0]="blank" 



itemulr[0]= "SH1" // Category Indentifier * 



ppic[1]="prevs001.jpg" 
ppic[2]="pre vs002.jpg" 
ppic[3]="prevs003.jpg" 
ppic[4]="prevs004.jpg" 
ppic[5]="prevs005.jpg" 



itemulr[1] = "info001.htmr 
itemulr[2] = "info002.html" 
itemulr[3] = "infoOOS.html" 
itemulr[4] = "info004.htmr' 
itemulr[5] = "InfoOOS.html" 



*Category Indentifier same as Subdirectory Name 



802 

var ilength =6; //#items+1 
POS[0] = "SHI, Category 1" 

P0S[1] = "lO.OO.SHI, info001.html, Item 1-1 Descriptive Name.prevsOOI.jpg, Details.gif' 
P0S[2] = "lO.OO.SHI, info002.html, Item 1-2 Descriptive Name, prevs002.jpg, 10off.gif" 
P0S[3] = "lO.OO.SHI, info003.html, Item 1-3 Descriptive Name,prevs003.jpg, Details.gif 
P0S[4] = "10.00,SH1, info004.html, Item 1-4 Descriptive Name,prevs004.jpg, 20off.gif' 
P0S[5] = "10.00,SH1, InfoOOS.html, Item 1-5 Descriptive Name.prevsOOS.jpg, new.gif 

803 

itemdsb[0]= "blank" 

itemdsb[1 ] = "This area for brief product description of Item 1 -1 ." 
itemdsb[2] = "This area for brief product description of Item 1-2." 
itemdsb[3] = "This area for brief product description of Item 1-3." 
itemdsb[4] = " This area for brief product description of Item 1-4." 
itemdsb[5] = " This area for brief product description of Item 1-5." 

804 

lnfostr="ltem 1-2 Descriptive Name#10.00#2#info002.html#prevs002.jpg#10off.gif#SH1#Catagory 1" 



A 



FIG. 8A 
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Vendor Internet Server(s) 




Recorded 
Data Transfer 



808 Recorded Selected Item Data 



I SHUCategory 1 

j #1!1!10.00!info001.html!ltem 11 Descriptive Namelprevs001.jpgidetails.gif! 
i #2!2!10.00!info002.litml!ltem 12 Descriptive Name Iprevs002.jpgl10off.gif! 

i _ "■ 
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WEB PAGE 
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DATA FILE GEN. 



TIME LOGS 



815 
816 

817 
818 
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820 
821 



825 INTERNET /INTRANET 



NETWORK 
INTERFACE 



MICRO- 
PROCESSOR 



RAM 



HIGH CAPICITY 

PORTABLE 
STORAGE MEDIA 
INTERFACE 



831 

832 
833 
834 



STORAGE 839 




OTHERS 




WEB BROWSER 


840 


CACHE 


841 


COOKIES 


842 



843 



DISPLAY 
INTERFACE 



I/O 

INTERFACE 
A A 

I > 



835 



h--. 845 
I 
I 



SOUND 
INTERFACE 



• • • • 



OTHER 
CLIENTS 





> 


844 


DISPLAY 














846 


SPEAKERS 



836 POINTER DEVICE 



837 KEYBOARD 



838 PRINTER 



FIG. 8C 
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/"Running SubtotaTN 
V.,^^^Procedure 
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912 
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Recall previously 
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I 



Calculate and record 
Page Total 



Recall the recorded 
running subtotal 



Update specified 
Transaction Amounts 




915 
916 

917 
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920 



Select or Change 
Item Quantity 



Calculate item Amount 



Calculate change 
in Page Total 

I 



Record New Page 
Total 



Record Item Selection 


923 






Calculate New 




Page Total 


924 



921 



922 



1 



Add change to 
Running Subtotal 



Alert User if < 0.0 or not a 
number to use Sum, page 



Record Running 
Subtotal 



Update specified 
Transaction Amounts 



FIG. 9B 
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930 
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Order Subtotal 
procedure Order 
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Calculate Order 
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Record Order Subtotal 



Update specified 
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Subtotal 




939 



940 





Record Order 
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Update specified 
Transaction Amounts 



FIG. 9C 



26/38 



+ 



Order Subtotal 
procedure 
Order Pages 



950 

951 
952 
953 

954 



Recall selected 
item(s) for Page 



Optionally calculate 
page total 





Recall ALL 






selected item(s) 




1 




Calculate Order 






Subtotal 




, \ . 



Update specified 
Transaction Amounts 




956 
957 
958 
959 



Select or Change 
Item Quantity 



Opitional Item Amount 



Opitional Page Total 

I 



Record Item Selection 



960 

961 
962 





Recall ALL 






selected item(s) 




1 




Calculate Order 






Subtotal 





Update specified 
Transaction Amounts 
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914 




915 
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Select or Change 
Item Quantity 



Calculate Item Amount 







Calculate New 
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Page Total 
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Calculate change 
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Record New Page 
Total 

I 



Add change to 
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Update specified 
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917 Record Item Selection 
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Record Order Subtotal 



^Done^^ ^ 
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FIG. 9E 



Opitional Page Total 



Record Item Selection 
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Recall ALL previously 
selected item(s) 



Calculate Order 
Subtotal 

I 



Update specified 
Transaction Amounts 



FIG. 9F 
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1001 
1002 



Load scripts and 
Catagory input data 



I 



Record Catagory name 
and location URL 



1003 




Preload Preview Images 



1004 



Display Catagory Title 
and table headers 



10Q5[ Set counter =1 &mstF"" ] 



Use item input data @j 
and HTML format @j to 
build display string 




1008 



1009 



Write HTML display 
string to document 



Display table footer 
with Page Total 



1010 



1011 



1012 
1013 



1014 
1015 



1016 



1017 



1018 



FIG. 10A 



Clear all displayed cells 



Recall module: 
Display previously 
selected quanties 




Calculate and record 
Page Total 



Recall the recorded 
running subtotal 



Optional Page Total 
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Recall ALL selected items 
and calculate subtotal 
module 



Update specified 
Transaction Amounts 




Display Clear Button 
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( Done J 
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Recall Module: 
previously selected 
Items Catagory 101 1 
Order Page 



1020 



Split documentcookie 
with ";" into Arrayl 



1021 



Inltailize Arrayl element 
counter i = 0 



1022 
Y ^^-^Completed air 
Arrayl elements? 



1023 



Split Arrayl element[ i ] 
with ' - " into Array2 
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saved data string^ 
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1025 
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1030 
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1031 



Use position to locate 
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FIG. 10B 
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FIG. 10D 
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1110 



Calculate Item Amount 
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Record Item Amount 
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running subtotal 



1113 



Recall ALL selected items 

and calculate subtotal 
module 
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FIG. 11A 
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Recall Module 
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— H 

C Done y 



FIG. 11B 
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917 Save item 959 
selection Item 
Description Page 



1141 
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Initialize Character 
String (mstr= "") 



Add Catagory data 
to string + # 



Intialize counter n' = 0 
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rm elements 
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